<template>
	<view class="customer-acceptance">
		<!-- 进度条导航 -->
		<view class="progress-nav-container">
			<scroll-view class="progress-nav" scroll-x="true" scroll-with-animation>
				<view 
					v-for="(step, index) in progressSteps" 
					:key="index"
					class="nav-step"
					:class="{ 'active': index <= currentStep }"
				>
					<view class="step-content">
						<text class="step-text">{{ step }}</text>
					</view>
					<view v-if="index < progressSteps.length - 1" class="step-arrow">></view>
				</view>
			</scroll-view>
		</view>

		<!-- 主要内容区域 -->
		<view class="content-area">
			<!-- 时间轴容器 -->
			<view class="timeline-container">
				<!-- 时间轴主线 -->
				<view class="timeline-line"></view>
				
				<!-- 状态卡片 -->
				<view class="status-card">
					<!-- 时间轴圆点 -->
					<view class="timeline-dot"></view>
					
					<!-- 状态内容 -->
					<view class="status-content">
						<!-- 时间戳 -->
						<text class="timestamp">{{ currentTime }}</text>
						
						<!-- 状态消息 -->
						<view class="status-message">
							<text class="message-text">退货申请已提交,等待客服受理,通常需要1-2个工作日</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<button class="next-btn" @click="nextStep">
				下一步
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStep: 2, // 当前步骤设置为2（客服受理步骤）
				progressSteps: ['提交申请', '申请原因', '客服受理', '寄回商品', '官方收货', '完成退款'],
				currentTime: this.getCurrentTime()
			}
		},
		methods: {
			// 获取当前时间
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				return `${year}.${month}.${day} ${hours}:${minutes}`;
			},
			
			// 下一步
			nextStep() {
				// 跳转到寄回商品页面
				uni.navigateTo({
					url: '/pages/yzmTReturngoods/yzmReturngoods'
				});
			}
		}
	}
</script>

<style>
page {
	background-color: #f5f5f5;
	font-size: 14px;
}

.customer-acceptance {
	min-height: 100vh;
	padding-bottom: 100px;
	box-sizing: border-box;
}

/* 进度条导航容器 */
.progress-nav-container {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	padding: 15px 0;
	display: flex;
	justify-content: center;
}

.progress-nav {
	width: 375px; /* iPhone6/7/8宽度 */
	height: 40px;
	white-space: nowrap;
}

.nav-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	height: 100%;
	position: relative;
}

.step-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.step-text {
	font-size: 12px;
	color: #999;
	text-align: center;
	line-height: 1.2;
	padding: 0 3px;
}

.nav-step.active .step-text {
	color: #ff4757;
	font-weight: 500;
}

.step-arrow {
	margin: 0 2px;
	color: #ddd;
	font-size: 10px;
}

/* 主要内容区域 */
.content-area {
	padding: 20px 15px;
}

/* 时间轴容器 */
.timeline-container {
	position: relative;
	padding-left: 30px;
	min-height: 100px;
}

/* 时间轴主线 */
.timeline-line {
	position: absolute;
	left: 15px;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: #ddd;
}

/* 状态卡片 */
.status-card {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	display: flex;
	align-items: flex-start;
}

/* 时间轴圆点 */
.timeline-dot {
	position: absolute;
	left: -25px;
	top: 20px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #ff4757;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #ff4757;
	z-index: 2;
}

/* 状态内容 */
.status-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.timestamp {
	font-size: 12px;
	color: #999;
	margin-bottom: 8px;
}

.status-message {
	display: flex;
	flex-direction: column;
}

.message-text {
	font-size: 14px;
	color: #333;
	line-height: 1.4;
}

/* 底部按钮 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;                                                                                                                       
	padding: 15px;
	background-color: #fff;
	border-top: 1px solid #eee;
}

.next-btn {
	width: 100%;
	height: 44px;
	background-color: #ff4757;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

.next-btn:hover {
	background-color: #e63946;
}
</style>